<template>
	<view>
		<view class="banner">
			<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/987a839f144d4f13b1ff0022b66caee7.jpg" mode="widthFix" class="b-cover"></image>
		</view>
		<view class="menu">
			<view class="m-title">纺扬建站公司能做什么</view>
			<text class="m-desc">企业网站建设、营销型网站制作、\n响应式网站开发、微信小程序设计</text>
			<view class="m-list">
				<navigator url="/pages/wzjs/qywzjs" class="ml-a" hover-class="none">
					<view class="mla-cover">
						<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/a7e8c7a776ab4f10918294b91789e352.png" mode="aspectFill" class="image"></image>
						<text class="tips">企业网站建设</text>
					</view>
					<view class="mla-desc">针对各行各业的背景分析，设计师一对一沟通设计界面，以达到用户最理想的网页风格，更具体的表现力和视觉效果，让网站更具有吸引力。</view>
				</navigator>
				<navigator url="/pages/wzjs/yxxwzzz" class="ml-a" hover-class="none">
					<view class="mla-cover">
						<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/fb851efd7812411d9bdfa0cf61aa2128.png" mode="aspectFill" class="image"></image>
						<text class="tips">营销型网站制作</text>
					</view>
					<view class="mla-desc">从策划、设计、功能开发、内容编写都得以企业现有城市盈利模式以及核心产品在传统中的销售渠道、设定网络目标客户群体。</view>
				</navigator>
				<navigator url="/pages/wzjs/xyswzkf" class="ml-a" hover-class="none">
					<view class="mla-cover">
						<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/1cf79cf85af2446cb9723f30565334ef.png" mode="aspectFill" class="image"></image>
						<text class="tips">响应式网站开发</text>
					</view>
					<view class="mla-desc">HTM5标准，网页随访客浏览屏幕大小变化而自动调整排版，确保浏览效果最佳。</view>
				</navigator>
				<navigator url="/pages/wzjs/wxxcxsj" class="ml-a" hover-class="none">
					<view class="mla-cover">
						<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/c1f7dfe5c81e4d4a87624cb8d641f6fa.png" mode="aspectFill" class="image"></image>
						<text class="tips">微信小程序设计</text>
					</view>
					<view class="mla-desc">国内专业的微信小程序、微商城、微信公众号开发商、致力于为企业 提升品牌、扩大知名度。</view>
				</navigator>
			</view>
		</view>
		<view class="hr"></view>
		<view class="multiport">
			<view class="m-title">手机网站、APP定制、微信公众号</view>
			<text class="m-desc">在移动互联时代，我们得出“简单使用、精彩体验”的\n移动应用开发理念，创造属于无线时代的精彩互联。</text>
			<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/a97278627be84bc395f20f102f7bb038.jpg" mode="widthFix" class="m-cover"></image>
			<view class="m-item">
				<view class="mi-title">多终端响应式网站</view>
				<view class="mi-desc">响应式布局是指一个网站适应用多个终端，能在不同的客户端，将网页内容以不同布局的方式完整呈现出来，以此为用户提供更好的体验，我们在设计较少交互和功能的展示型网站时会要求用此种方式来降低运营和维护的成本。</view>
				<view class="mi-list">
					<view class="mil-box">
						<view class="milb-icon icon1"></view>
						<view class="milb-text">用户体验友好</view>
					</view>
					<view class="mil-box">
						<view class="milb-icon icon2"></view>
						<view class="milb-text">节省开成本</view>
					</view>
					<view class="mil-box">
						<view class="milb-icon icon3"></view>
						<view class="milb-text">SEO优化</view>
					</view>
					<view class="mil-box">
						<view class="milb-icon icon4"></view>
						<view class="milb-text">便于维护</view>
					</view>
				</view>
			</view>
		</view>
		<view class="hr"></view>
		<view class="advantage">
			<view class="a-title">选择我们的6大优势</view>
			<view class="a-block">
				<view class="ab-list yellow list1">
					<view class="abl-content">
						<view class="ablc-title">展示多样</view>
						<view class="ablc-desc">为用户量身定制适合自己的品牌形象</view>
					</view>
				</view>
				<view class="ab-list blue list2">
					<view class="abl-content">
						<view class="ablc-title">技术培训</view>
						<view class="ablc-desc">多年WEB体系研究，专注网站建设</view>
					</view>
				</view>
				<view class="ab-list gray list3">
					<view class="abl-content">
						<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/d44bd0b058f94f79ab287daf80302903.png" mode="widthFix" style="width: 100%;"></image>
					</view>
				</view>
				<view class="ab-list blue list4">
					<view class="abl-content">
						<view class="ablc-title">营销覆盖广</view>
						<view class="ablc-desc">关键词覆盖国内主流搜索引擎</view>
					</view>
				</view>
				<view class="ab-list yellow list5">
					<view class="abl-content">
						<view class="ablc-title">定期培训</view>
						<view class="ablc-desc">根据客户需求，为新老客解决疑难问题</view>
					</view>
				</view>
				<view class="ab-list blue list6">
					<view class="abl-content">
						<view class="ablc-title">用心服务</view>
						<view class="ablc-desc">覆盖全国多个城市的服务网络</view>
					</view>
				</view>
				<view class="ab-list yellow list7">
					<view class="abl-content">
						<view class="ablc-title">性价比高</view>
						<view class="ablc-desc">无需按点击付费，低投入，高回报</view>
					</view>
				</view>
			</view>
			<view class="a-flow">
				<view class="af-list">
					<image src="@/static/images/icon-check.png" class="afl-icon"></image>
					<view class="afl-tips">
						<text class="blue">智能建站</text>
						<text>系统近干套行业模型</text>
					</view>
				</view>
				<view class="af-list">
					<image src="@/static/images/icon-check.png" class="afl-icon"></image>
					<view class="afl-tips">
						<text>手机站和PC站</text>
						<text class="blue">同步</text>
						<text>二维码，抢占移动商机</text>
					</view>
				</view>
				<view class="af-list">
					<image src="@/static/images/icon-check.png" class="afl-icon"></image>
					<view class="afl-tips">
						<text>关键词在各大搜索引擎</text>
						<text class="blue">实现排名</text>
					</view>
				</view>
				<view class="af-list">
					<image src="@/static/images/icon-check.png" class="afl-icon"></image>
					<view class="afl-tips">
						<text>多方面营销 多网</text>
						<text class="blue">覆盖</text>
					</view>
				</view>
				<view class="af-list">
					<image src="@/static/images/icon-check.png" class="afl-icon"></image>
					<view class="afl-tips">
						<text>智能管理通讯系统集成QQ旺旺 SKYPE</text>
					</view>
				</view>
				<view class="af-list">
					<image src="@/static/images/icon-check.png" class="afl-icon"></image>
					<view class="afl-tips">
						<text>强大的外链资源库，网站有</text>
						<text class="blue">排名</text>
					</view>
				</view>
				<view class="af-list">
					<image src="@/static/images/icon-check.png" class="afl-icon"></image>
					<view class="afl-tips">
						<text>多分站推广，把产品推广到</text>
						<text class="blue">全国</text>
					</view>
				</view>
			</view>
			<button class="a-button">我要建站</button>
		</view>
		<view class="hr"></view>
		<view class="choose">
			<view class="c-title">企业为什么选择我们</view>
			<view class="c-list aclear">
				<view class="cl-box">
					<view class="clb-icon icon1"></view>
					<view class="clb-item">
						<view class="clbi-title">低价透明</view>
						<text class="clbi-desc">统一报价，\n无隐形消费</text>
					</view>
				</view>
				<view class="cl-box">
					<view class="clb-icon icon2"></view>
					<view class="clb-item">
						<view class="clbi-title">金牌服务</view>
						<text class="clbi-desc">一对一专属顾问7*24\n小时金牌服务</text>
					</view>
				</view>
				<view class="cl-box">
					<view class="clb-icon icon3"></view>
					<view class="clb-item">
						<view class="clbi-title">信息保密</view>
						<text class="clbi-desc">个人信息\n安全有保障</text>
					</view>
				</view>
				<view class="cl-box">
					<view class="clb-icon icon4"></view>
					<view class="clb-item">
						<view class="clbi-title">售后无忧</view>
						<text class="clbi-desc">服务出问题客服经理\n全程跟进</text>
					</view>
				</view>
			</view>
		</view>
		<Footers></Footers>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onShow() {
			// 设置TDK
			if (uni.getSystemInfoSync().uniPlatform == 'mp-baidu') {
				swan.setPageInfo({
					title: '上海、北京、成都、广州、深圳网站建设-网站制作-网站设计开发公司-纺扬网站建设',
					description: '网站建设，网站制作，网站开发，seo优化公司哪家好，首选纺扬网站建设（☏:191-0267-1826），我们是专业的小程序建设，网站开发，seo关键词优化，巨量引擎抖音广告代运营公司，致力于为客户创造商业价值，合作共赢。',
					keywords: '网站建设,网站制作,网站开发,网站设计,纺扬网站建设'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("@/static/css/color.less");

	.menu {
		padding: 59rpx 0 26rpx;
		background-color: #E4F2FF;
		
		.m-title {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}
		
		.m-desc {
			margin-top: 20rpx;
			display: block;
			text-align: center;
			font-size: 24rpx;
			color: @color-title-black;
		}
		
		.m-list {
			padding: 40rpx 24rpx 0 0;
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			
			.ml-a {
				margin: 0 0 24rpx 24rpx;
				width: 338rpx;
				background-color: #fff;
				box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.09);
				
				.mla-cover {
					position: relative;
					width: 100%;
					height: 200rpx;
					overflow: hidden;
					
					&:before {
						content: '';
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						background-color: rgba(0,0,0,.5);
					}
					
					.image {
						width: 100%;
						height: 100%;
					}
					
					.tips {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						color: #fff;
						font-size: 30rpx;
						font-weight: 500;
						white-space: nowrap;
					}
				}
				
				.mla-desc {
					padding: 20rpx;
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	.multiport {
		padding-top: 40rpx;
		
		.m-title {
			font-weight: bold;
			font-size: 36rpx;
			text-align: center;
		}
		
		.m-desc {
			margin-top: 21rpx;
			display: block;
			text-align: center;
			font-size: 24rpx;
		}
		
		.m-cover {
			margin: 40rpx 24rpx 0;
			width: 100%;
		}
		
		.m-item {
			padding: 30rpx 24rpx 39rpx;
			
			.mi-title {
				font-size: 30rpx;
				padding-bottom: 10rpx;
				color: #030303;
				position: relative;
				
				&::after {
					content: '';
					width: 32rpx;
					height: 1rpx;
					background-color: #333;
					position: absolute;
					bottom: 0;
					left: 0;
				}
			}
			
			.mi-desc {
				margin-top: 29rpx;
				font-size: 24rpx;
				color: #666;
				line-height: 40rpx;
			}
			
			.mi-list {
				padding-top: 39rpx;
				display: flex;
				align-items: stretch;
				justify-content: space-between;
				
				.mil-box {
					width: 140rpx;
					
					.milb-icon {
						width: 100%;
						height: 120rpx;
						
						&.icon1 {
							background: #F7F7F7 url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/a49d786bfd1d4888b161993b68ef7905.png) center / 82rpx no-repeat;
						}
						
						&.icon2 {
							background: #F7F7F7 url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/e74aee6ce12a45b285bff8acc86b23d0.png) center / 77rpx no-repeat;
						}
						
						&.icon3 {
							background: #F7F7F7 url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/6596ffd6a59a43d4b40141620801cb53.png) center / 85rpx no-repeat;
						}
						
						&.icon4 {
							background: #F7F7F7 url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/2ac529708c4a4c57b03e6e9e48b99b62.png) center / 83rpx no-repeat;
						}
					}
					
					.milb-text {
						margin-top: 19rpx;
						text-align: center;
						font-size: 24rpx;
						color: #666;
						overflow: hidden;
					}
				}
			}
		}
	}

	.advantage {
		padding-top: 39rpx;
		
		.a-title {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}
		
		.a-block {
			margin-top: 40rpx;
			position: relative;
			height: 736rpx;
			
			.ab-list {
				width: 158rpx;
				height: 232rpx;
				display: flex;
				align-items: center;
				position: absolute;
				
				&::before {
					content: '';
					width: 250rpx;
					height: 130rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%) rotate(28deg);
				}
				
				&::after {
					content: '';
					width: 250rpx;
					height: 130rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%) rotate(-28deg);
				}
				
				&.yellow, &.yellow::before, &.yellow::after {
					background-color: @color-yellow;
				}
				
				&.blue, &.blue::before, &.blue::after {
					background-color: @color-blue;
				}
				
				&.gray, &.gray::before, &.gray::after {
					background-color: #E4F2FF;
				}
				
				.abl-content {
					position: relative;
					width: 100%;
					z-index: 1;
					
					.ablc-title {
						color: #fff;
						font-size: 30rpx;
						font-weight: 500;
					}
					
					.ablc-desc {
						margin-top: 15rpx;
						color: #fff;
						font-size: 24rpx;
					}
				}
				
				&.list1 {
					top: 0;
					left: 50%;
					transform: translateX(-50%);
				}
				
				&.list2 {
					top: 126rpx;
					left: 60rpx;
				}
				
				&.list3 {
					top: 252rpx;
					left: 50%;
					transform: translateX(-50%);
				}
				
				&.list4 {
					top: 126rpx;
					right: 60rpx;
				}
				
				&.list5 {
					top: 378rpx;
					left: 60rpx;
				}
				
				&.list6 {
					top: 504rpx;
					left: 50%;
					transform: translateX(-50%);
				}
				
				&.list7 {
					top: 378rpx;
					right: 60rpx;
				}
			}
		}
	
		.a-flow {
			margin-top: 40rpx;
			padding: 0 24rpx;
			
			.af-list {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.afl-icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
				
				.afl-tips {
					font-size: 30rpx;
					color: @color-title-black;
					
					.blue {
						font-size: 30rpx;
						color: @color-blue;
					}
				}
			}
		}
		
		.a-button {
			margin: 40rpx 24rpx;
			background-color: @color-blue;
			color: #fff;
			border-radius: 0;
			border: 0;
			font-size: 36rpx;
			font-weight: bold;
			
			&::after {
				content: unset;
			}
		}
	}

	.choose {
		padding-top: 40rpx;
		
		.c-title {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}
		
		.c-list {
			margin-top: 40rpx;
			padding: 0 0 56rpx 24rpx;
			
			.cl-box {
				float: left;
				margin: 0 24rpx 24rpx 0;
				width: 338rpx;
				display: flex;
				align-items: flex-start;
				
				.clb-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					border: 2rpx solid #676767;
					margin-right: 20rpx;
					
					&.icon1 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/74106b87d3384d6c8930f9f5db9b6fe3.png) center / auto 40rpx no-repeat;
					}
					
					&.icon2 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/011162de976f4a3f8cfad3e3a8b940db.png) center / auto 40rpx no-repeat;
					}
					
					&.icon3 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/76650137d17a46e083f0bb5e6af30070.png) center / auto 40rpx no-repeat;
					}
					
					&.icon4 {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/53adc0a9843e4c5cb3a3d6772f3db603.png) center / auto 40rpx no-repeat;
					}
				}
				
				.clb-item {
					flex: 1;
					overflow: hidden;
					
					.clbi-title {
						font-size: 28rpx;
						color: #666;
						font-weight: bold;
					}
					
					.clbi-desc {
						font-size: 22rpx;
						color: #666;
						margin-top: 10rpx;
						display: block;
					}
				}
			}
		}
	}
</style>
